<template>
	<div class="image-share-container">
		<h1 class="title">图片分享</h1>
		<!-- 图片上传区域 -->
		<div class="upload-section">
			<van-uploader v-model="fileList" :after-read="handleAfterRead" :max-count="5" :auto-upload="false"
				:disabled="isUploading" class="uploader-custom">
				<van-button type="primary" size="small">上传图片</van-button>
			</van-uploader>
			<van-button type="primary" size="small" @click="uploadImages"
				:disabled="isUploading || fileList.length === 0" class="upload-button">
				{{ isUploading? '正在上传...' : '确认上传' }}
			</van-button>
		</div>
		<!-- 图片展示区域 -->
		<div class="image-list">
			<van-image v-for="(file, index) in fileList" :key="index" :src="file.url" :preview-src-list="[file.url]"
				class="image-item" />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				fileList: [], // 存储选择的图片文件列表
				isUploading: false, // 上传状态
			};
		},
		methods: {
			// 处理文件选择后的操作
			handleAfterRead(file) {
				this.fileList.push(file);
			},
			// 上传图片的方法，这里简单模拟上传，实际需与后端接口交互
			uploadImages() {
				this.isUploading = true;
				// 模拟上传延迟
				setTimeout(() => {
					// 假设上传成功，清空文件列表
					this.fileList = [];
					this.isUploading = false;
				}, 2000);
			},
		},
	};
</script>

<style scoped>
	.image-share-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		background-color: #f9f9f9;
		/* 修改背景颜色 */
		font-family: Arial, sans-serif;
		line-height: 1.6;
	}

	.title {
		font-size: 32px;
		color: #333;
		margin-bottom: 20px;
		text-align: center;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
		/* 添加文字阴影 */
	}

	.upload-section {
		margin-bottom: 20px;
		text-align: center;
		/* 使内部按钮居中 */
	}

	.uploader-custom {
		border: 1px dashed #ccc;
		/* 添加虚线边框 */
		border-radius: 5px;
		padding: 20px;
		margin-bottom: 10px;
		cursor: pointer;
		transition: border-color 0.3s ease;
		/* 添加过渡效果 */
	}

	.uploader-custom:hover {
		border-color: #007bff;
		/* 鼠标悬停时改变边框颜色 */
	}

	.upload-button {
		margin-top: 10px;
		padding: 8px 16px;
		border-radius: 3px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
	}

	.image-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		/* 图片居中排列 */
	}

	.image-item {
		width: 120px;
		height: 120px;
		margin: 10px;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 添加图片阴影 */
		overflow: hidden;
		/* 隐藏超出图片容器的部分 */
	}

	.van-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 图片保持比例填充容器 */
	}
</style>